<script setup lang="ts">
import {defineProps, ref} from 'vue';
import {PropType} from "vue";
import router from "@/router";
import {useUserStore} from "@/store/user";
import {joinTeam} from "@/api/team";
import {Toast} from "vant";

interface Team {
  id: number;
  teamName: string;
  content: string;
  commentCount: number;
  userId: number;
  createTime: Date;
  maxPerson?: number;
  expireTime?: Date;
  status?: number;
  inJoin: boolean
}


const props = defineProps({
  team: Object as PropType<Team>
});



const user = useUserStore()
const onJoinTeam = async () => {

  const res = await joinTeam(props.team?.id, user.id,password)
  props.team.inJoin = res
  if (!res) {
    Toast("不能重复入队")
  }
}

</script>
<template>
  {{showDialog}}
  <div id="teamCardList">
    <van-card
        :key="team?.id"
        :thumb="`https://bpic.588ku.com/element_origin_min_pic/19/03/07/1c1f8a60faf89fd97b0832baab0db608.jpg`"
        :title="team?.teamName||'Team'"
        @click="">
      <template #bottom>
        <div>
          {{ "最大人数：" + team.maxPerson }}
          <!--          {{ `队伍人数: ${team.hasJoinNum || 0}/${team.maxNum || 5}` }}-->
        </div>
        <div>
          {{ '过期时间: ' + team.expireTime }}
        </div>
        <div>
          {{ '创建时间: ' + team.createTime }}
        </div>
      </template>
      <template #footer>
        <van-button v-if="!team?.inJoin" size="mini" @click="onJoinTeam">加入队伍</van-button>
        <van-button v-else size="mini" disabled>已入队伍</van-button>
      </template>

    </van-card>

  </div>
</template>


<style scoped>
#teamCardList {
  padding: 0 10px;
}

.van-card {
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
